<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>学成在线</title>
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<link rel="icon" href="images/logo.png">
</head>
<body>
	<!-- 头部模块 -->
	<div class="head">
		<div class="center_head">
		<div class="logo">
			<a href=""><img src="images/logo.png" alt=""></a>
		</div>
		<div class="nav">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">课程</a></li>
				<li><a href="">职业规划</a></li>
			</ul>
		</div>
		<div class="search">
			<input type="text" placeholder="输入关键字">
			<a href=""><img src="images/btn.png" alt=""></a>
		</div>
		<div class="user">
			<a href=""><img src="images/user.jpg" alt="" style="vertical-align: middle;"></a>
			<span>lilei-hanmm</span>
		</div>
		</div>
	</div>
	<!-- banner部分模块 -->
	<div class="banner">
		<div class="center_banner">
			<a href=""><img src="images/banner2.jpg" alt=""></a>
			<div class="left_nav">
			<ul>
				<li>
					<a href="">
						前端开发
						<span>></span>
					</a>
				</li>
				<li>
					<a href="">
						后端开发
						<span>></span>
					</a>
				</li>
				<li>
					<a href="">
						移动开发
						<span>></span>
					</a>
				</li>
				<li>
					<a href="">
						人工智能
						<span>></span>
					</a>
				</li>
				<li>
					<a href="">
						商业预测
						<span>></span>
					</a>
				</li>
				<li>
					<a href="">
						云计算&大数据
						<span>></span>
					</a>
				</li>
				<li>
					<a href="">
						运维&从测试
						<span>></span>
					</a>
				</li>
				<li>
					<a href="">
						UI设计
						<span>></span>
					</a>
				</li>
				<li>
					<a href="">
						产品
						<span>></span>
					</a>
				</li>
			</ul>
		    </div>	
		    <div class="right_nav">
		    	<div class="top">我的课程表</div>
		    	<div class="center">
		    		<ul>
		    			<li>
		    				<a href="#">
		    					<h4>继续学习  程序语言设计</h4>
		    					<p>正在学习-使用对象</p>
		    				</a>
		    			</li>
		    			<li>
		    				<a href="#">
		    					<h4>继续学习  程序语言设计</h4>
		    					<p>正在学习-使用对象</p>
		    				
		    				</a>
		    			</li>
		    			<li>
		    				<a href="#">
		    					<h4>继续学习  程序语言设计</h4>
		    					<p>正在学习-使用对象</p>	
		    				</a>
		    			</li>
		    		</ul>
		    		<a href="#" class="all">全部课程</a>
				</div>
		    </div>
		</div>
	</div>
	<!--兴趣模块 -->
	<div class="intersting">
		<h3>精品推荐</h3>
		<div class="kecheng" id="xx">
			|
			<a href="#">jQuery</a>
			|
			<a href="#">Spark</a>
			|
			<a href="#">MySQL</a>
			|
			<a href="#">JavaWeb</a>
			|
			<a href="#">Vue</a>
			|
			<a href="#">React</a>
		</div>
		<div class="mod">
			<a href="#">修改兴趣</a>
		</div>
	</div>
	<!-- box start -->
	<div class="box_middle">
		<div class="box_middle_hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<div class="box_middle_bd clearflx">
			<ul>
				<li style="margin-left: 0px">
					<a href="">
					<img src="images/1.png" alt="">
					<h4>前端框架及项目面试及项目实战</h4>
					<p>
						<span>高级</span>
						  •  3025人在学习
					</p>
				    </a>
				</li>
				<li>
					<a href="">
					<img src="images/2.png" alt="">
					<h4>python开发量化交易系统及实战</h4>
					<p>
						<span>高级</span>
						  •  1420人在学习
					</p>
					</a>
				</li>
				<li>
					<a href="">
					<img src="images/3.png" alt="">
					<h4>玩转算法面试的方法及项目经验</h4>
					<p>
						<span>高级</span>
						  •  115人在学习
					</p>
					</a>
				</li>
				<li>
					<a href="">
					<img src="images/4.png" alt="">
					<h4>Flutter高级进阶仿哔哩哔哩APP</h4>
					<p>
						<span>高级</span>
						  •  621人在学习
					</p>
					</a>
				</li>
				<li style="float: right;margin-right: 0px">
					<a href="">
					<img src="images/5.png" alt="">
					<h4>python爬虫实战数据可视化分析</h4>
					<p>
						<span>高级</span>
						  •  1100人在学习
					</p>
					</a>
				</li>
				<li style="margin-left: 0px">
					<a href="">
					<img src="images/6.png" alt="">
					<h4>0基础入门前端及高效学习前端</h4>
					<p>
						<span>高级</span>
						  •  1564人在学习
					</p>
					</a>
				</li>
				<li>
					<a href="">
					<img src="images/7.png" alt="">
					<h4>Spring Cloud分布式微服务实战</h4>
					<p>
						<span>高级</span>
						  •  525人在学习
					</p>
					</a>
				</li>
				<li>
					<a href="">
					<img src="images/8.png" alt="">
					<h4>Vue3.0(正式版)企业及项目实战</h4>
					<p>
						<span>高级</span>
						  •  2541人在学习
					</p>
					</a>
				</li>
				<li>
					<a href="">
					<img src="images/9.png" alt="">
					<h4>React 17系统精讲与实战</h4>
					<p>
						<span>高级</span>
						  •  3521人在学习
					</p>
					</a>
				</li>
				<li style="float: right;margin-right: 0px">
					<a href="">
					<img src="images/10.png" alt="">
					<h4>前后端分离开发wiki知识库</h4>
					<p>
						<span>高级</span>
						  •  1905人在学习
					</p>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!-- box end -->

	<!-- box start -->
	<div class="box_middle">
		<div class="box_middle_hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<div class="box_middle_bd clearflx">
			<ul>
				<li style="margin-left: 0px">
					<a href="">
					<img src="images/11.png" alt="">
					<h4>Vue3+Koa2全栈开发后台系统</h4>
					<p>
						<span>高级</span>
						  •  1545人在学习
					</p>
					</a>
				</li>
				<li>
					<a href="">
					<img src="images/12.png" alt="">
					<h4>React 17 + TS4最佳实践</h4>
					<p>
						<span>高级</span>
						  •  1725人在学习
					</p>
					</a>
				</li>
				<li>
					<a href="">
					<img src="images/13.png" alt="">
					<h4>OpenCV从入门到进阶到精通</h4>
					<p>
						<span>高级</span>
						  •  125人在学习
					</p>
					</a>
				</li>
				<li>
					<a href="">
					<img src="images/14.png" alt="">
					<h4>Java小白体验课系统学习Java</h4>
					<p>
						<span>高级</span>
						  •  2125人在学习
					</p>
					</a>
				</li>
				<li style="float: right;margin-right: 0px">
					<a href="">
					<img src="images/15.png" alt="">
					<h4>算法与数据结构C++版及进阶视频</h4>
					<p>
						<span>高级</span>
						  •  1025人在学习
					</p>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!-- box end -->

	<!-- footer start -->
	<div class="footer">
		<div class="center_footer">
			<!-- 左侧 -->
			<div class="left_content">
				<img src="images/logo.png" alt="">
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
				© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
				</p>
				<a href="##" class="app">下载app</a>
			</div>
			<!-- 右侧 -->
			<div class="right_content">
				<dl>
					<dt>关于学成网</dt>
					<dd><a href="#">关于</a></dd>
					<dd><a href="#">管理团队</a></dd>
					<dd><a href="#">工作机会</a></dd>
					<dd><a href="#">客户服务</a></dd>
					<dd><a href="#">帮助</a></dd>
				</dl>
				<dl>
					<dt>新手指南</dt>
					<dd><a href="#">如何注册</a></dd>
					<dd><a href="#">如何选课</a></dd>
					<dd><a href="#">如何拿到毕业证</a></dd>
					<dd><a href="#">学分是什么</a></dd>
					<dd><a href="#">考试未通过怎么办</a></dd>
				</dl>
				<dl>
					<dt>合作伙伴</dt>
					<dd><a href="#">合作机构</a></dd>
					<dd><a href="#">合作导师</a></dd>
				</dl>
			</div>
		</div>
	</div>
	<!-- footer end -->
</body>
</html>	